<template>
  <div class="information-item" @click="onCheckChange">
    <a-checkbox :checked="props.infoData.isSelected" class="checkBox" @click.stop="onCheckChange">
    </a-checkbox>
    <div class="mains">
      <InformationItemContent :info-data="props.infoData" :is-draft="1">
        <template #leftContent="slotParam">
          <div class="img-container">
            <img
              v-if="slotParam.thumbUrl.substr(slotParam.thumbUrl.length - 1) !== '4'"
              class="cover"
              :src="slotParam.thumbUrl"
            />
            <video v-else class="cover" :src="slotParam.thumbUrl"></video>
          </div>
        </template>
      </InformationItemContent>
      <div class="option">
        <a-button
          type="primary"
          size="small"
          ghost
          @click.stop="toRelease(props.infoId, props.infoData.infoType)"
          >发布</a-button
        >
        <a-button
          class="delete"
          size="small"
          @click.stop="toModify(props.infoId, props.infoData.infoType)"
          >修改</a-button
        >
        <a-button class="delete" size="small" @click.stop="showDialog">删除</a-button>
      </div>
    </div>
  </div>
  <my-dialog
    :dialog-state="dialog.visible"
    :dialog-title="dialog.title"
    :dialog-width="dialog.width"
    :icon-type="dialog.warring"
    :show-icon="true"
    :draft-box-visible="false"
    :content-text="dialog.content"
    :sub-content-text="dialog.subContent"
    @handleCancel="dialogCancel"
    @handleOk="dialogOk"
  ></my-dialog>
</template>
<script setup>
import MyDialog from '@/components/dialog/index.vue';
import InformationItemContent from '../information/information-item-content';
import { defineEmits, defineProps, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
  infoData: { type: Object },
  infoId: { type: String }
});
const emit = defineEmits(['draftDeleteInfo', 'draftSelectInfo']);
// 弹窗相关
const dialog = reactive({
  title: '温馨提示',
  content: '是否删除该条草稿信息？',
  subContent: '此操作不可恢复请谨慎操作！',
  warring: 'warring',
  visible: false,
  width: '406px'
});
// 展示删除弹窗
function showDialog() {
  dialog.visible = true;
}
// 草稿箱发布
function toRelease(id, infoType) {
  router.push({
    path: '/position',
    query: {
      id: id,
      // releaseType: infoType === 1 ? 12 : infoType === 0 ? 11 : infoType === 3 ? 4 : 100,
      releaseType: infoType === 1 ? 13 : infoType === 0 ? 11 : infoType === 3 ? 4 : 100,
      infoType: infoType, // 模块状态
      state: '草稿箱发布'
    }
  });
}
// 修改
function toModify(id, value) {
  if (value === 1) {
    router.push({
      path: '/post-message/imgAndVideo',
      query: {
        id: id,
        state: '草稿箱修改',
        activeState: 0
      }
    });
  } else {
    router.push({
      path: '/post-message/article',
      query: {
        id: id,
        state: '草稿箱修改',
        activeState: 1
      }
    });
  }
}

// 点击取消
function dialogCancel() {
  dialog.visible = false;
}
// 点击确定
function dialogOk() {
  dialog.visible = false;
  emit('draftDeleteInfo', [props.infoData.id]);
}

function onCheckChange() {
  emit('draftSelectInfo', { id: props.infoData.id, isSelected: !props.infoData.isSelected });
}

// 选中
</script>

<style lang="less" scoped>
.information-item {
  margin-top: 16px;
  border-radius: 5px;
  border: 1px #e1dddd solid;
  &:hover {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
    .img-container::after {
      background: rgba(0, 0, 0, 0.15) !important;
    }
    .cover {
      transform: scale(1.19);
      transition: all 0.5s;
    }
  }
  .img-container {
    width: 160px;
    height: 120px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.05);
    }
    .cover {
      width: 160px;
      height: 120px;
      object-fit: cover;
    }
  }

  .checkBox {
    vertical-align: middle;
    margin-left: 16px;
    // margin-right: 16px;
    line-height: 152px;
    height: 152px;
    float: left;
  }
  .mains {
    padding: 16px 24px 16px 16px;
    display: flex;
  }
}
// 操作
.option {
  height: 24px;
  flex-shrink: 0;
  .delete {
    margin-left: 8px;
    color: #999999;
  }
  button:hover {
    color: #d6aa56;
  }
}
.micro-ant-btn:focus {
  border-color: #e1dddd !important;
}
</style>
